import { Button, Modal, Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import {
  changeModal,
  changeParams,
  getNoticeAsync,
} from "@/store/notice/noticeSlice";
import { deleteNotice } from "@/store/notice/noticeAPI";

export interface DataType {
  announce_id: number;
  announce_end: number;
  announce_start: number;
  announce_type: number;
  en_content: string;
  en_title: string;
  pt_content: string;
  pt_title: string;
  status: number;
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.notice);
  const {
    config: { data: { data: { announce_type_map = [], announce_stat_map = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "开始时间",
      dataIndex: "announce_start",
      key: "announce_start",
      align: "center",
      render: (text) => dayjs.unix(text).tz(TZ).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "结束时间",
      dataIndex: "announce_end",
      key: "announce_end",
      align: "center",
      render: (text) => dayjs.unix(text).tz(TZ).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "公告类型",
      dataIndex: "announce_type",
      key: "announce_type",
      align: "center",
      render: (text) =>
        announce_type_map?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "英语标题",
      dataIndex: "en_title",
      key: "en_title",
      align: "center",
    },
    {
      title: "英语内容",
      dataIndex: "en_content",
      key: "en_content",
      align: "center",
    },
    {
      title: "葡语标题",
      dataIndex: "pt_title",
      key: "pt_title",
      align: "center",
    },
    {
      title: "葡语内容",
      dataIndex: "pt_content",
      key: "pt_content",
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      align: "center",
      render: (text) => announce_stat_map?.find?.(i => i.value === text)?.label,
    },
    {
      title: "操作",
      dataIndex: "opt",
      key: "opt",
      align: "center",
      render: (_text, record) => {
        return (
          <Button.Group size="small">
            <Button
              disabled={record.status === 2}
              type="primary"
              ghost
              onClick={() => {
                dispatch(
                  changeModal({
                    type: "update",
                    open: true,
                    record,
                  })
                );
              }}
            >
              编辑
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => {
                Modal.confirm({
                  title: "确认删除吗？",
                  onOk: () =>
                    new Promise<void>((resolve, reject) => {
                      deleteNotice({
                        announce_id: record.announce_id,
                      })
                        .then(() => {
                          resolve();
                          dispatch(getNoticeAsync({ ...params }));
                        })
                        .catch(reject);
                    }),
                });
              }}
            >
              删除
            </Button>
          </Button.Group>
        );
      },
    },
  ];

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.count,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getNoticeAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.data || []}
      size="small"
      rowKey="announce_id"
    />
  );
}
